import { Row, Col, message } from "antd"
import styles from "./index.module.scss"
import Category_Foods from "@/components/Category_Foods"
import { useSelector } from 'react-redux'
import { useEffect, useState } from "react"
import { getCategory } from "@/apis/category"
let timer: any = null
const Mainfood = () => {
    const thems = useSelector((state: any) => state.Appstore.theme)
    const [datalist, setDatalist] = useState<any>([])
    const [isButton, setIsbutton] = useState(false)
    const [CurrentPage, setCurrenPage] = useState(1)
    const Emptys = [
        {
            id: "1"
        },
        {
            id: "2"
        },

    ]
    const Getdata = async () => {
        const result: any = await getCategory(CurrentPage * 12 - 12, '0')
        if (result.data.length === 0) {
            console.log(0)
            message.info("没有更多了")
            setIsbutton(true)
            return
        }
        setDatalist([...datalist, ...result.data])
    }
    const scrolls = (total: number, top: number, height: number) => {

        clearTimeout(timer)
        timer = setTimeout(() => {
            if (isButton) {
                return
            }
            if (total <= top + height + 1) {

                console.log("到底了")

                setCurrenPage(CurrentPage + 1)
            }
        }, 200);

    }
    useEffect(() => {
        Getdata()
    }, [CurrentPage])
    return (
        <div className={styles.Mainfood}>
            <div onScroll={(e: any) => scrolls(e.target.scrollHeight, e.target.scrollTop, e.target.clientHeight)} className={styles.MianBody} style={{ background: thems ? 'rgba(255,255,255,0.7)' : 'rgba(0,0,0,0.4)', height: '85vh', overflowY: "scroll" }}>
                <Row justify="space-evenly">
                    {
                        datalist.map((item: any, index: number) => {

                            return (
                                <Category_Foods keyIndex={index} key={index} item={item}></Category_Foods>

                            )
                        })
                    }
                    {
                        Emptys.map((_, index) => {

                            return (
                                <Col xs={22} sm={22} md={10} lg={7} key={index}></Col>
                            )
                        })
                    }
                </Row>
            </div>
        </div >
    )
}

export default Mainfood